<script setup>
import PagePanel from './PagePanel.vue';
import { ref } from 'vue';

const value = ref(false);

</script>


<template>
  <div class="table-display">
    <div class="table-data">
      <PagePanel />
    </div>
    <div class="table-pagination">
      <el-pagination class="pagination-tool" :hide-on-single-page="value" background layout="prev, pager, next" :total="11" />
    </div>
  </div>
</template>

<style lang="scss" scoped>
.table-display {
  width: 100%;
  height: 100%;

  .table-data {
    width: 100%;
    height: 500px;
    align-items: center;
    padding: 0 auto;
  }

  .table-pagination {
    width: 100%;
    height: 40px;
    display: flex;

    .pagination-tool {
      margin: 0 auto;
    }
  }
}
</style>
